import React from 'react';

const BasicTest = () => {
  // 添加控制台日志来跟踪组件渲染
  console.log('BasicTest组件正在渲染');
  
  React.useEffect(() => {
    console.log('BasicTest组件已挂载');
    return () => {
      console.log('BasicTest组件将卸载');
    };
  }, []);
  
  return (
    <div style={{
      padding: '20px',
      textAlign: 'center',
      background: '#f0f2f5',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div style={{
        background: 'white',
        padding: '30px',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        maxWidth: '500px'
      }}>
        <h1 style={{ color: '#1890ff', marginBottom: '20px' }}>✅ 基础React测试</h1>
        <p style={{ color: '#666', marginBottom: '15px' }}>如果你能看到这个页面，说明：</p>
        
        <div style={{
          textAlign: 'left',
          background: '#f6ffed',
          border: '1px solid #b7eb8f',
          borderRadius: '4px',
          padding: '15px',
          marginBottom: '20px'
        }}>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ React核心库正常加载</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ JSX语法正常编译</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ 组件渲染功能正常</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ CSS样式正常应用</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ useEffect钩子正常工作</p>
        </div>
        
        <div style={{
          background: '#fff7e6',
          border: '1px solid #ffd591',
          borderRadius: '4px',
          padding: '15px',
          marginBottom: '20px'
        }}>
          <p style={{ margin: '5px 0', color: '#fa8c16' }}>⚠️ 请检查浏览器控制台查看日志信息</p>
        </div>
        
        <button 
          onClick={() => {
            console.log('按钮点击事件触发');
            alert('事件处理正常工作！');
          }}
          style={{
            background: '#1890ff',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px',
            marginRight: '10px'
          }}
        >
          测试事件处理
        </button>
        
        <button 
          onClick={() => {
            window.location.href = '/console-debug.html';
          }}
          style={{
            background: '#52c41a',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px'
          }}
        >
          打开调试工具
        </button>
      </div>
    </div>
  );
};

export default BasicTest;